<template>
    <div id="p_indexVideo" class="p_task">
            <sticky scroll-box="vux_view_box_body" :check-sticky-support="false" :offset="0">
                <video id="videoDesc" style="width:100%;max-height: 221px;" :poster="videoPoster"  :src="videoUrl" controls="controls">
                  您的浏览器不支持
                </video>
            </sticky>
            <group>
                <cell :title="currItem.title" :value="currItem.count" :inline-desc="currItem.desc"></cell>
            </group>
            <group>
                <panel class="video" @on-click-item="onVideo" :list="list" :type="type"></panel>
            </group>
    </div>
</template>
<script>
import api from '../../api';
import axios from 'axios';
import {parseString} from 'xml2js';
// import {videolist} from '../../data/163open.js';
var videolist= [];

var player ;

import {
    mapState,
    mapActions
} from 'vuex'

import {
    Tab,
    TabItem,
    TransferDomDirective as TransferDom,
    Toast,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    XButton,
    PopupPicker,
    Group,
    Picker,
    Cell,
    Swiper,
    SwiperItem,Panel, Grid, GridItem, GroupTitle,
    Sticky
} from 'vux'

export default {
     data() {
        return {
            videoUrl:'',
            videoPoster:"",
            currentId:'',
            type: '5',
            list: videolist ,
            topbanMask:false,
              showPopupPicker: false,
              value5: ['2'],
            timeindex: 0,
            guideHeight: "500px",
            mdcontent:'',
            currItem:{title:"",desc:"",count:0},
        }
    },
    components: {
    Tab,
    TabItem,
        Toast,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton,
        XButton,
    PopupPicker,
    Group,
    Picker,
        Cell,
    Swiper,
    SwiperItem,Panel, Grid, GridItem, GroupTitle,
    Sticky
    },
    computed: {
        ...mapState({
            uid: state => state.vux.uid
        })
    },
    watch: {
        "$route.params":function(){
            if( _.isEmpty(this.$route.params.id) ){
                return ;
            }
            let id = this.$route.params.id ;
            this.changeVideo(id);
        }
    },
    created() {
        this.initPage();
        // var len = videolist.length ;
        // for(var i=0;i<= len-1 ;i++){
        //     var item = videolist[i] ;
        //     item.id = i ;
        // }
    },
    mounted: function() {
    },
    activated:function(){
        // let id = this.$route.params.id ;
        // this.changeVideo(id);
        this.initPage();
    },
    methods: {
        initPage(id){
            let url = "//7dtime.com/static/z39h5/data/indexVideo.xml?v=" ;
            let dev = process.env.NODE_ENV == "development" ;
            if (dev) url = "static/z39h5/data/indexVideo.xml?v="
            axios.get(url+moment().format('YYYY-MM-DD')).then(data=>{
                parseString(data.data, (err, result)=> {
                    var temp = [];
                    result.root.item.map(item=>{
                        temp.push(item.$);
                    })
                    this.renderVideo(temp);
                    console.dir("result",temp);
                });
            })
        },
        renderVideo(list){
            var small = [] ;
            var len = list.length ;
            for(var i=0;i<= len-1 ;i++){
                var item = list[i] ;
                item.id = i ;
            }
            videolist = list ;
            this.list = list ;
            let id = this.$route.params.id ;
            this.changeVideo(id);
        },
        changeVideo(id){
            this.currItem = this.list[id];
            this.initVideo(id);
            document.querySelector("#vux_view_box_body").scrollTop = 0 ;
        },
        initVideo(id){
            let item = videolist[id];
            this.currItem = item ;
            this.videoUrl = item.video;
            document.querySelector("#videoDesc").poster = item.src ;
            // this.videoPoster = item.src ;
        },
        onVideo(item){
            // this.go(`video/${item.id}`)
            this.changeVideo(item.id);
        },
        ...mapActions([
        ])
    }
}

</script>
<style scoped>

</style>
<style>

#p_indexVideo .weui-cells {
    margin-top: 0px;
}
#p_indexVideo .weui-panel {
    margin-top: 4px;
}

#p_indexVideo .weui-search-bar:before {
    height: 0;
    border-top: 0;
}

#p_indexVideo .video  .weui-media-box__hd{
    width: 120px;
    height: 80px;
}
#p_indexVideo .video .weui-media-box{
    padding: 8px;
}

</style>
